<template>
  <div class="tab-fourth" v-loading="loading">
    <dl>
      <dt>1、微页面URL链接：</dt>
      <dd>
        <el-row class="row-copy">
          <el-col :span="20">
            <el-input ref="url" v-model="urlContainer.microPageUrl" placeholder="请输入内容"></el-input>
          </el-col>
          <el-col :span="4" style="margin: 0; line-height:36px; text-align: right">
            <a class="default" href="javascript:void(0)" @click="handleCopy">复制链接</a>
          </el-col>
        </el-row>
      </dd>
      <dt>2、微页面二维码：</dt>
      <dd>
        <figure style="width: 200px;margin: 0 auto;text-align: center">
          <img v-if="!!urlContainer.urlQrDownM" :src="urlContainer.urlQrDownM" width="100" alt="二维码">
          <img v-if="!urlContainer.urlQrDownM" class="table-qr" src="../assets/icon-qr-666666.png" width="64" alt="">
          <figcaption>
            <a class="default" href="javascript:void(0)" @click="handleDialogOpen('download-qr')"
               style="margin-left: 0">下载不同尺寸的二维码</a>
          </figcaption>
        </figure>
      </dd>
      <dt>
        <el-row>
          <el-col :span="12">
            3、带有渠道来源参数的二维码：
          </el-col>
          <el-col :span="12" style="text-align: right">
            <a class="setting" href="javascript:void(0)" @click="handleDialogOpen('channel')" style="float: right;">
              <img src="../assets/icon-setting-409EFF.png" width="20" alt="">
              <span>渠道设置</span>
            </a>
          </el-col>
        </el-row>
      </dt>
      <dd>
        <p style="font-size: 12px;color: #999999;">说明：如果要对微页面的数据来源进行统计，可以为URL加上渠道来源参数，进行来源追踪和统计</p>
        <el-row class="row-search">
          <el-col :span="18">
            <el-input v-model="searchStr" placeholder="渠道来源" icon="close" :on-icon-click="handleSeachClose">
              <!--<el-button slot="append" icon="search"></el-button>-->
              <el-button slot="append" @click="handleSearchClick">搜索</el-button>
            </el-input>
          </el-col>
          <el-col :span="6" style="text-align: right">
            <el-button @click="handleDialogOpen('create-url')">创建可追踪URL</el-button>
          </el-col>
        </el-row>
        <el-table class="list" :data="list" border>
          <el-table-column prop="channel" label="渠道来源"></el-table-column>
          <el-table-column prop="shareUrl" label="URL链接"></el-table-column>
          <el-table-column label="二维码">
            <template slot-scope="scope">
              <img src="../assets/icon-qr-666666.png" width="32" height="32"
                   alt="qr.icon" style="cursor: pointer;display: block"
                   @click="handleDialogOpen('url-qr',scope.row)">
            </template>
          </el-table-column>
          <el-table-column prop="ceateTime" label="创建时间">
            <template slot-scope="scope">
              {{dateFormat(scope.row.ceateTime)}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="70">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDelUrl(scope.row.turlId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-text-right">
          <el-pagination layout="total,prev, pager, next" :current-page.sync="currentPage"
                         :total="page.total" :page-size="10" @current-change="handleCurrentChange"/>
        </div>
      </dd>
    </dl>
    <!--<el-dialog title="渠道设置" :visible.sync="dialogChannelVisible">
      <v-dialog-content-channel v-if="dialogChannelVisible"/>
    </el-dialog>-->
    <v-dialog-content-download-qr
      ref="dialogDownloadQR"
      :urlContainer="urlContainer"/>
    <v-dialog-content-channel ref="dialogChannel"/>
    <v-dialog-content-create-url
      ref="dialogCreateUrl"
      :shareUrl="urlContainer.microPageUrl"
      @axiosSuccess="handleCreateUrlSuccess"/>
    <v-dialog-content-url-qr ref="dialogUrlQR"/>

  </div>
</template>
<script type="text/babel">
// import QRCode from 'qrcode'
import DownloadQR from '../components/dialog/DownloadQR.vue'
import Channel from '../components/dialog/Channel.vue'
import CreateUrl from '../components/dialog/CreateUrl.vue'
import UrlQR from '../components/dialog/UrlQR.vue'

import { queryTraceableUrl, urlQrContainer, delTraceableUrl } from '@/service/getData'

export default {
  data () {
    return {
      loading: false,
      urlContainer: {
        'microPageUrl': '',
        'urlQrDownS': '', // 小
        'urlQrDownM': '', // 中
        'urlQrDownB': '' // 大
      },

      searchStr: '',
      list: [],
      page: {
        current: 1,
        pages: 1,
        size: 10,
        total: 0
      },
      currentPage: 1
    }
  },
  components: {
    'v-dialog-content-download-qr': DownloadQR,
    'v-dialog-content-channel': Channel,
    'v-dialog-content-create-url': CreateUrl,
    'v-dialog-content-url-qr': UrlQR
  },
  methods: {
    // 日期格式化
    dateFormat (date) {
      return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
    },
    axiosQueryTraceableUrl (payload) {
      this.loading = true
      queryTraceableUrl(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              var resJson = res.data
              this.list = resJson.data.list
              this.page = resJson.data.page
            }
          })
          .finally(() => {
            this.loading = false
          })
    },
    axiosUrlQrContainer (payload) {
      urlQrContainer(payload)
          .then((res) => {
            if (res.data && 'code' in res.data && res.data.code === 1) {
              var resJson = res.data
              this.urlContainer = resJson.data
            }
          })
          .finally(() => {
            this.loading = false
          })
    },
    handleCopy () {
      this.$refs.url.$el.firstElementChild.select()
      document.execCommand('Copy')
      this.$alert('复制成功！', '提示', {
        confirmButtonText: '确定',
        callback: action => {

        }
      })
    },
    handleCreateUrlSuccess () {
      this.handleSearchClick()
      this.$refs.dialogCreateUrl.reset()
      this.$refs.dialogCreateUrl.dialogVisible = false
    },
    // 删除url
    async handleDelUrl (id) {
      await this.$confirm('是否确认删除', '请确认')
      await delTraceableUrl({turlId: id})
      this.handleSearchClick()
    },
    handleCurrentChange () {
      this.axiosQueryTraceableUrl({
        'channel': this.searchStr,   // 渠道活动，参数不传传，默认查全量
        'logicId': this.$route.params.id,   // 微页面ID
        'page': this.currentPage, // 当前页
        'size': 10 // 分页条数
      })
    },
    handleSeachClose () {
      this.searchStr = ''
    },
    handleSearchClick () {
      this.currentPage !== 1 ? this.currentPage = 1 : this.handleCurrentChange()
    },
    handleDialogOpen (type, payload) {
      if (type === 'channel') {
          // 渠道设置开启
        this.$refs.dialogChannel.init()
      } else if (type === 'create-url') {
          // 创建可追踪url开启
        this.$refs.dialogCreateUrl.init()
      } else if (type === 'download-qr') {
          // 下载不同尺寸的二维码
        this.$refs.dialogDownloadQR.init()
      } else if (type === 'url-qr') {
        this.$refs.dialogUrlQR.init(payload)
      }
    }

  },
  mounted () {
  },
  activated () {
      /* urlContainer */
    this.axiosUrlQrContainer({
      'logicId': this.$route.params.id   // 微页面ID
    })
    /* list */
    this.currentPage !== 1 ? this.currentPage = 1 : this.handleCurrentChange()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss">
  .tab-fourth {
    width: 100%;
    position: relative;

    dl {
      dt {
        font-family: '微软雅黑';
        font-weight: 400;
        font-style: normal;
        font-size: 14px;
        line-height: 20px;
      }
      dd {
        margin: 0;
        padding: 10px 0;
      }
    }

    .row-search {
      margin: 10px 0;
      font-size: 13px;
      .el-icon-close {
        right: 65px;
      }
    }
  }


</style>
